<template>
  <div class="siderBar" :style="{ width: siderbarOpen ? '200px' : '50px' }">
    <ul>
      <li
        :class="{ active: '/' + item.path == $route.path }"
        v-for="item in navList"  v-if="!item.meta.hidden"   :key="item.path"  @click="toPage(item.path)"
      >
        <img
          :src="
            '/' + item.path == $route.path
              ? item.meta.icon_active
              : item.meta.icon
          "
          alt=""
        />
        {{ item.meta ? item.meta.title : "" }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  mounted() {
    // console.log(19, this.$router);
  },
  data() {
    return {};
  },
  computed: {
    navList() {
      return this.$router.options.routes[1].children;
    },
    ...mapState({
      siderbarOpen: "siderbarOpen",
    }),
  },
  methods: {
    toPage(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.siderBar {
  // width: 200px;
  transition: all 1s;
  background: #ccc;
  height: calc(100vh - 60px);
  ul {
    margin: 0;
    padding: 0;
    margin-top: 20px;
    li {
      list-style: none;
      margin: 10px 0;
      cursor: pointer;
      img {
        width: 16px;
        vertical-align: text-top;
      }
    }
    li:hover {
      color: blue;
    }
    .active {
      color: blue;
    }
  }
}
</style>